import md5 from 'js-md5'
import React, { Component } from 'react'
import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
import { px2dp, showToast } from 'rn-xiaobu-utils'
import ajaxAsync from '../../../src/utils/ajaxAsync'
import { getTitleBarOptions } from '../../../src/utils/DefaultTitleOption'
import { setUserInfo } from '../../../src/utils/UserBean'
import PhoneInput from '../../components/login/logininput/PhoneInput'
import PasswordInput from '../../components/login/logininput/PasswordInput'
import LoginBtn from '../../components/login/loginbtn/LoginBtn'
import ImageButton from '../../widgets/ImageButton'
import TextButton from '../../widgets/TextButton'
import NavigationService from '../../../src/utils/NavigationService'

export default class FirstPage extends Component {
  static navigationOptions = ({ navigation }) => {
    let rightBtn = (
      <TextButton
        style={styles.titleRightBtn}
        touchStyle={styles.titleRightTouch}
        text="注册"
        onPress={() => {
          navigation.push('Registry')
        }}
      />
    )
    return getTitleBarOptions({ navigation }, { headerRight: rightBtn })
  }

  componentWillMount (): void {
    setUserInfo().then(() => {
    })
  }

  // 自定义的函数都使用定义属性的写法，否则会取不到this
  _onLoginButton = () => {
    Promise.all([
      this.refs.phoneInput._validText(),
      this.refs.passwordInput._validText()
    ]).then(result => {
      let sendObj = {
        USERNAME: result[0],
        PASSWORD_MD5: md5(result[1])
      }
      ajaxAsync('/user/login', sendObj).then(body => {
        // 将登录状态变为已登录
        body.IS_LOGIN = 1
        body.PHONE = sendObj.USERNAME
        setUserInfo(body).then(() => {
          showToast('登录成功')
          this.props.navigation.dismiss()
        })
      }).catch(() => {
      })
    }).catch(err => {
      showToast(err.message)
      // this.props.navigation.dismiss()
    })
  }

  _goToMsgLoginPage = () => {
    this.props.navigation.push('MsgLogin')
  }

  _goToForgetPwdPage = () => {
    this.props.navigation.push('Registry', { isForget: true })
  }

  render () {
    return (
      // <SafeAreaView style={styles.container}>
      // </SafeAreaView>
      <SafeAreaView style={styles.scrollView}>
        <View style={styles.inputView}>
          <PhoneInput ref="phoneInput"/>
          <PasswordInput ref="passwordInput"/>
          <LoginBtn text="登录" onPress={this._onLoginButton}/>
          <View style={styles.btnView}>
            <TextButton
              text="短信验证码登录"
              style={styles.pwdBtn}
              onPress={this._goToMsgLoginPage}/>
            <TextButton
              text="忘记密码"
              style={styles.pwdBtn}
              onPress={this._goToForgetPwdPage}/>
          </View>
        </View>
        <View style={styles.bottomView}>
          <View style={styles.lineView}>
            <View style={styles.line}/>
            <Text style={styles.lineText}>第三方登录</Text>
            <View style={styles.line}/>
          </View>
          <ImageButton
            source={require('../../../assets/img/login/wx.png')}
            style={styles.wxicon}
            touchStyle={styles.ticon}
            onPress={() => NavigationService.push('Home')}
          />
        </View>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  titleRightBtn: {
    fontSize: px2dp(28),
    color: '#999999'
  },
  titleRightTouch: {
    height: '100%',
    paddingHorizontal: px2dp(30),
    justifyContent: 'center',
    alignItems: 'center'
  },
  container: {
    flex: 1
  },
  scrollView: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center'
    // paddingLeft: px2dp(30),
    // paddingRight: px2dp(30)
  },
  scrollChild: {
    flex: 1,
    backgroundColor:
      '#aaf'
  },
  inputView: {
    flex: 1,
    alignItems:
      'center'
    // paddingBottom: px2dp(250)
  },
  btnView: {
    width: px2dp(690),
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  pwdBtn: {
    paddingTop: px2dp(40),
    paddingBottom: px2dp(40),
    paddingLeft: px2dp(10),
    paddingRight: px2dp(10),
    color: '#999999',
    fontSize: px2dp(24)
  },
  // 以下是第三方登录模块
  bottomView: {
    width: px2dp(690)
    // height: px2dp(260),
    // position: 'absolute',
    // bottom: 0,
    // left: px2dp(30),
    // right: px2dp(30)
  },
  lineView: {
    width: px2dp(690),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: px2dp(60)
  },
  line: {
    flex: 1,
    height: px2dp(1),
    backgroundColor: '#CCCCCC'
  },
  lineText: {
    paddingLeft: px2dp(30),
    paddingRight: px2dp(30),
    fontSize: px2dp(22),
    color: '#999999'
  },
  wxicon: {
    width: px2dp(100),
    height: px2dp(100)
  },
  ticon: {
    marginLeft: 'auto',
    marginRight: 'auto',
    marginBottom: px2dp(60)
  }
})
